<!-- 设备管理 -->
<template>
	<view class="equipment">
		<Tabs style="" keyName="name" @change="change" :list="tabsData">
			<template v-slot:nav>
				<view class="equipment_nav">
					<view class="flex flex-ai-c" style="padding: 0 30rpx;">
						<view @click="devicePopupShow = true">
							<i-icon icon="ss" size="45rpx" />
						</view>
						<view class="f1">
							<u-search @search="onSearch" @change="changeValue" placeholder="输入设备号、系列号搜索"
								v-model="keyword" :showAction="false"></u-search>
						</view>
					</view>
				</view>
			</template>
			<template :slot="swiperCurrent+'tabs'">
				<view class="equipment_content" v-if="list.length">
					<view class="equipment_content_item" v-for="(item,index) in list" :key="item.id">
						<!-- 标题和金额 -->
						<view class="equipment_content_item_title">
							<view class="title flex flex-jc-c flex-ai-c">
								<text>{{item.device_name}}</text>
								<view class="type" :class="'type-' + item.status">{{item.status | filtersText}}</view>
							</view>
							<block v-if="userTypeArr.includes(1) || userTypeArr.includes(2)">
								<view class="price">
									<view>
										<text>昨日收益(元)</text>
										<text>{{item.income.yesterday}}</text>
									</view>
									<view>
										<text>今日收益(元)</text>
										<text>{{item.income.today}}</text>
									</view>
									<view>
										<text>上月收益(元)</text>
										<text>{{item.income.last_month}}</text>
									</view>
								</view>
							</block>
						</view>

						<!-- 详细信息 -->
						<view class="equipment_content_item_content" style="width: 100%;">
							<view class="equipment_content_item_content_1 flex flex-ai-c flex-jc-sb">
								<text>系列号</text>
								<text>{{item.device_no}}</text>
							</view>

							<view class="equipment_content_item_content_2" @click="fpositionEdit(item)">
								<view class="flex flex-ai-c flex-jc-sb">
									<text>位置</text>
									<view class="flex">
										<text>{{item.address || '请填写设备位置信息'}}</text>
										<u-icon name="arrow-right" size="20rpx"></u-icon>
									</view>
								</view>
								<view>
									{{item.address_detial}}
								</view>
							</view>

							<view class="equipment_content_item_content_3 flex flex-ai-c">
								<view v-if="userTypeArr.includes(3)" style="width: 33.3%;">
									<text>占股比：</text>
									<text>{{item.extend.investor_ratio}}%</text>
								</view>
								<view style="width: 33.3%;">
									<text>缺货率：</text>
									<text>{{item.extend.stock_rate}}%</text>
								</view>
								<view style="width: 33.3%;">
									<text>售空货道：</text>
									<text>{{item.extend.channel_null_number}}/{{item.extend.channel_total}}</text>
								</view>
							</view>
							<block v-if="item.show" style="width: 100%;">
								<scroll-view scroll-x @touchmove.stop="">
									<view class="equipment_content_item_content_4 flex flex-ai-c">
										<view v-for="(item2,index2) in item.equipment_draw"
											@click="preview(item.equipment_draw,index2)" :key="index2">
											<u-image width="186rpx" height="200rpx" :src="item2"></u-image>
										</view>
									</view>

								</scroll-view>
							</block>

							<view @click.stop="fclock(item)" class="equipment_content_item_content_5"
								v-if="item.equipment_draw.length">
								<text>{{item.show?'收起网点信息':'展开网点信息'}}</text>
								<u-icon :name="item.show?'arrow-up':'arrow-down'"></u-icon>
							</view>
						</view>

						<!-- 1=市代, 2=区/县代,3=投资人,4=推荐人,5=运维-->
						<view class="equipment_content_item_button flex flex-jc-sb"
							:class="[item.is_purchase?'':'bf_button']">
							<view @click.stop="fisShow(item)">管理密码</view>
							<!-- <view @click="skip(item)">预览</view> -->
							<view @click="skip(item)" v-if="item.is_purchase">补货</view>
							<view @click.stop="fcargoWay(item)">货道管理</view>
						</view>
					</view>
				</view>
				<view class="flex flex-jc-c flex-ai-c" v-else style="height: 70vh;">
					<u-empty text="数据为空" mode="list"></u-empty>
				</view>
			</template>
		</Tabs>


		<!-- 弹出层的东西 -->
		<view class="equipment_pop">
			<!-- 对话框 -->
			<u-modal textAlign="center" :closeOnClickOverlay="true" confirmText="退出" confirmColor="#FCB527" :show="show"
				:title="title" :content='content' @confirm="fconfirm" @close="show = false"></u-modal>
		</view>
		<device-popup @changeAddress="changeAddress" @swichMenu="swichMenu" @close="devicePopupShow = false"
			:show="devicePopupShow" />
		<TabBar :current-page="2" />
	</view>
</template>

<script>
	import home from '@/api/home.js'
	import Tabs from '@/components/tabs.vue'
	import devicePopup from '@/components/devicePopup.vue';
	export default {
		components: {
			Tabs,
			devicePopup
		},
		data() {
			return {
				swiperCurrent: 0,
				devicePopupShow: false,
				keyword: '',
				isShow: true, // 是否展示网点信息
				isShow2: false, // 是否是代理商
				// 弹出框
				show: false,
				title: '暂无',
				content: '当前设备管理密码仅可使用一次',
				userinfo: uni.getStorageSync('userinfo'),
				// tabs数据
				tabsData: [{
						name: '全部',
						value: -1
					},
					{
						name: '在线',
						value: 1
					},
					{
						name: '离线',
						value: 0
					},
					{
						name: '故障',
						value: 2
					},

				],
				list: [],
				status: -1,
				userTypeArr: []
			};
		},
		onLoad() {
			if (!uni.getStorageSync('token')) return this.onRelaunck()
			this.getDeviceList()
			let account_type = this.userinfo.account_type
			this.userTypeArr = account_type.split(',').map(v => parseInt(v))
		},
		filters: {
			filtersText(val) {
				let text = ''
				switch (val) {
					case 0:
						text = '离线'
						break
					case 1:
						text = '在线'
						break
					case 2:
						text = '故障'
						break
				}
				return text
			}
		},
		methods: {
			onRelaunck() {
				uni.showToast({
					title: '请登录！',
					icon: 'none',
					duration: 2000
				})
			},
			preview(img, index) {
				uni.previewImage({
					urls: img,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏']
					}
				});
			},
			async viewDevicePassword(device_no) {
				const res = await home.viewDevicePassword({
					device_no
				})
				this.title = res.data.pwd_code
			},
			onSearch(e) {
				this.list = []
				this.keyword = e
				this.getDeviceList()
			},
			changeValue(e) {
				if (!e) {
					this.list = []
					this.getDeviceList()
					return
				}
			},
			changeAddress(device_no, current) {
				this.list = []
				this.devicePopupShow = false
				this.keyword = device_no
				this.getDeviceList()
			},
			swichMenu(index, item) {
				this.list = []
				this.devicePopupShow = false
				this.keyword = ''
				this.getDeviceList()

			},
			skip(item) {
				/* uni.redirectTo({
					url: `/pages/equipment/preview?device_no=${item.device_no}&lat=${item.lat}&lng=${item.lng}`
				}); */
				uni.navigateTo({
					url: `/pages/equipment/replenishment/form?device_no=${item.device_no}`
				})
			},
			async getDeviceList() {
				const res = await home.getDeviceList({
					keyword: this.keyword,
					status: this.status
				}, this.userinfo.id)
				res.data.device_info.map(v => v.show = false)
				this.list = res.data.device_info
			},
			fclock(item) {
				item.show = !item.show
			},

			// 货道管理
			fcargoWay(item) {
				this.$store.commit('selectedList', {})
				uni.navigateTo({
					url: `/pages/equipment/cargoWay?id=${item.id}&device_no=${item.device_no}`
				});
			},

			// 位置编辑
			fpositionEdit(item) {
				uni.navigateTo({
					url: `/pages/equipment/positionEdit?device_no=${item.device_no}`
				});
			},


			// 打开对话框
			fisShow(val) {
				this.show = true
				this.viewDevicePassword(val.device_no)

			},
			change(i) {
				this.swiperCurrent = i
				this.status = this.tabsData[i].value
				this.getDeviceList()
			},
			// 确定
			fconfirm() {
				this.show = false
			},

		}
	}
</script>

<style>
	page {
		background: #F2F2F2;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.type-1 {
		background: #30D158;
	}

	.type-0 {
		background: #999999;
	}

	.type-2 {
		background: #F95533;
	}

	.type {
		border-radius: 4rpx;
		padding: 4rpx 10rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.equipment {
		height: 100%;

		.equipment_nav {
			background-color: #fff;
			padding-top: 20rpx;
			padding-bottom: 10rpx;

			image {
				width: 40rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
		}

		.equipment_content {
			.equipment_content_item {
				background-color: #fff;
				border-radius: 10rpx;
				margin: 20rpx;
				margin-bottom: 0;
				box-sizing: border-box;
				padding: 30rpx 0 0 0;

				// 标题和金额
				.equipment_content_item_title {
					padding-bottom: 30rpx;
					border-bottom: 1px solid #d8d8d8;

					// 标题
					.title {

						&>text {
							font-size: 32rpx;
							font-weight: 600;
							color: #333333;
							margin-right: 14rpx;
						}
					}

					// 金额
					.price {
						display: flex;
						justify-content: space-between;
						box-sizing: border-box;
						padding: 0 60rpx;
						margin-top: 40rpx;

						&>view {
							width: 33.3%;
							display: flex;
							flex-direction: column;
							align-items: center;
							position: relative;

							&:not(:last-child) {
								&::before {
									content: '';
									position: absolute;
									right: 0;
									top: 50%;
									margin-top: -30rpx;
									width: 1px;
									height: 60rpx;
									border-right: 1px solid #d8d8d8;
								}
							}

							&>text:nth-child(1) {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
								margin-bottom: 22rpx;
							}

							&>text:nth-child(2) {
								font-size: 32rpx;
								font-family: Avenir-Medium, Avenir;
								font-weight: 500;
								color: #F95533;
							}
						}
					}

				}

				// 详细信息
				.equipment_content_item_content {
					border-bottom: 1px solid #d8d8d8;
					padding: 30rpx 0;


					// 序列号
					.equipment_content_item_content_1 {
						padding: 0 30rpx;

						&>text:nth-child(1) {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}

						&>text:nth-child(2) {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}
					}

					// 位置
					.equipment_content_item_content_2 {
						display: flex;
						flex-direction: column;
						padding: 0 30rpx;
						margin: 30rpx 0;

						&>view:nth-child(1) {

							&>text {
								width: 56rpx;
								height: 28rpx;
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								line-height: 28rpx;
							}

							&>view {
								text {
									font-size: 28rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #333333;
								}

								image {
									width: 12rpx;
									height: 20rpx;
									margin-left: 16rpx;
								}
							}
						}

						&>view:nth-child(2) {
							text-align: right;
							margin-top: 30rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}
					}

					// 占股份比
					&_3 {
						padding: 0 30rpx;

						&>view>text:nth-child(1) {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}

						&>view>text:nth-child(2) {
							font-size: 28rpx;
							font-family: Avenir-Medium, Avenir;
							font-weight: 500;
							color: #F95533;
						}
					}

					// 图片
					.equipment_content_item_content_4 {
						margin-top: 30rpx;
						padding: 0 30rpx;

						&>view:not(:last-child) {
							margin-right: 30rpx;
						}
					}

					// 收起网点信息
					&_5 {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 30rpx;

						text {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}

						image {
							width: 20rpx;
							height: 12rpx;
							margin-left: 6rpx;
						}
					}


				}

				.bf_button::before {
					content: "";
					width: 172rpx;
					height: 60rpx;
				}

				// 按钮组
				.equipment_content_item_button {
					box-sizing: border-box;
					padding: 30rpx;

					&>view {
						width: 172rpx;
						height: 60rpx;
						border-radius: 30rpx;
						border: 1px solid #666666;
						text-align: center;
						line-height: 60rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;
						box-sizing: border-box;

						&:last-child {
							color: #fff;
							background: #FCB527;
							border: none;
						}
					}
				}

			}
		}
	}
</style>